<script lang="ts">
  import { defineComponent, ref } from '@vue/composition-api';
  import OtoTextarea from '@/components/common/oto-textarea.vue';
  import OtoImageUpload, { ImageItem } from '@/components/common/partner-upload.vue';
  import OtoButton from '@/components/common/oto-button.vue';
  import { createDynamic, DynamicContent } from '@/api/dynamic';
  import OtoRadio, { RadioPropsType } from './components/radio.vue';
  import { getDynamicTypeListNotAll } from '@/enum/dynamic.enum';
  import { useRouter } from '@/constants/router';

  export default defineComponent({
    components: {
      OtoTextarea,
      OtoImageUpload,
      OtoButton,
      OtoRadio
    },
    setup() {
      const title = ref('这是首页');
      const form = ref<DynamicContent>({
        content: '',
        images: '',
        type: 0
      });

      function uploadChange(list: ImageItem[]) {
        form.value.images = list
          .map((file) => file.cloudPath)
          .filter((cloudPath) => !!cloudPath)
          .join(',');
      }

      const typeList = ref<RadioPropsType['list']>(getDynamicTypeListNotAll());
      const router = useRouter();

      function publishDynamic() {
        createDynamic(form.value).then((res) => {
          console.log(res);
          router.navigateBack({
            delta: 1
          });
        });
      }

      return {
        title,
        form,
        uploadChange,
        typeList,
        publishDynamic
      };
    }
  });
</script>

<template>
  <view class="dynamic-publish">
    <view class="dynamic-publish-body">
      <view class="dynamic-content">
        <oto-textarea
          :placeholder-style="{
            color: 'rgba(187,187,187,1)',
            fontSize: '28rpx'
          }"
          :custom-style="{
            width: '100%',
            height: '270rpx',
            padding: '16rpx 22rpx 16rpx 22rpx',
            color: 'rgba(70.13,70.13,70.13,1)',
            fontSize: '32rpx'
          }"
          v-model="form.content"
          placeholder="想说就多说点..."
        />
      </view>
      <view class="topic-select">
        <oto-radio v-model="form.type" :list="typeList" />
      </view>
      <view class="imgae-upload">
        <oto-image-upload :auto-upload="true" :max="9" :count="9" @getImages="uploadChange" />
      </view>
    </view>
    <view class="publish-button">
      <oto-button
        :custom-style="{
          width: '152rpx',
          height: '60rpx',
          fontSize: '36rpx',
          fontWeight: 400
        }"
        @click.stop="publishDynamic"
      >
        发表
      </oto-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .dynamic-publish {
    .dynamic-publish-body {
      position: relative;
      border-radius: 16rpx;
      opacity: 1;
      background: rgba(246, 246, 248, 1);
      padding: 0 40rpx 0 40rpx;
      .dynamic-content {
        padding: 40rpx 0 40rpx 0;
      }
      .topic-select {
        margin-bottom: 30rpx;
      }
      .anonymous {
        margin-top: 28rpx;
        margin-bottom: 40rpx;
      }
      .imgae-upload {
        padding: 0 58rpx 40rpx 60rpx;
      }
      .anonymous-pick {
        position: absolute;
        top: 426rpx;
        right: 74rpx;
      }
    }
    .publish-button {
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
    }
  }
</style>
